<template>
  <div class="app-container">
    <el-card class="box-card">
      <div style="text-align: center">
        国内出发航班动态
      </div>
      <el-table
        :data="tableData"
        style="width: 100%;margin-top: 10px">
        <el-table-column
          prop="flightNo"
          label="航班号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="planTime"
          label="计划"
          width="140">
        </el-table-column>
        <el-table-column
          prop="origin"
          label="始发地">
        </el-table-column>
        <el-table-column
          prop="arriveStation"
          label="经停/到站">
        </el-table-column>
        <el-table-column
          prop="checkTime"
          label="值机时间"
          width="160">
        </el-table-column>
        <el-table-column
          prop="flightStatus"
          label="状态"
          width="180">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>

import { statisticsFlightDynamics } from '../api/homePage/home'

export default {
  name: 'Index',
  components: {
  },
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.getFlightDynamics();
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 0) {
        return 'warning-row';
      } else if (rowIndex === 1) {
        return 'success-row';
      } else if (rowIndex === 2) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      } else if (rowIndex === 4) {
        return 'warning-row';
      }
      return '';
    },

    /** 查询航班动态 */
    getFlightDynamics() {
      this.loading = true
      statisticsFlightDynamics().then(response => {
          this.tableData = response.data
        }
      )
    },

  }
}
</script>

<style scoped>
.box-card {
  width: 100%;
  height: 350px;
}

/* 使用深度选择器更改表头颜色 */
::v-deep .el-table th {
  background-color: #70C2C3; /* 蓝色背景 */
  color: whitesmoke; /* 文字颜色 */
}
</style>
